<!DOCTYPE html>
<html>

<head>
    <title>图片裁切</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctxPath}/assets/common/layui/css/layui.css"/>

    <!--jquery-->
    <script type="text/javascript" src="${ctxPath}/assets/common/module/jquery/jquery-1.9.1.min.js"></script>

    <!--裁切-->
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/jcrop/jquery.Jcrop.css" type="text/css"/>
    <script type="text/javascript" src="${ctxPath}/assets/common/module/jcrop/jquery.Jcrop.js"></script>


    <style>

    </style>

</head>

<body>

<form id="cutForm" lay-filter="cutForm" class="layui-form model-form" style="max-width: 700px;">

    <input type="hidden" id="x" name="x"/>
    <input type="hidden" id="y" name="y" />
    <input type="hidden" id="w" name="w" />
    <input type="hidden" id="h" name="h" />
    <input type="hidden" id="width" name="width" value="${width}"/>
    <input type="hidden" id="height" name="height" value="${height}"/>

    <div class="layui-form-item" style="margin-left: 65px;">
        <div class="layui-upload">
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="imgShow" src="" alt="[Jcrop Example]">
                <p id="imgText"></p>
            </div>
        </div>
        <input type="hidden" id="imgPath" name="imgPath" value="${imgPath}" placeholder="" type="text" class="layui-input" lay-verify="" />
    </div>


    <div class="layui-form-item text-right" style="text-align: right; margin-right: 10px;">
        <button class="layui-btn" id="btnSubmit" lay-submit>确定</button>
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog" id="backupPage">返回</button>
    </div>
</form>

@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "",
        addCtx: function (ctx) {
            if (this.ctxPath === "") {
                this.ctxPath = ctx;
            }
        }
    };
    Feng.addCtx("${ctxPath}");
</script>
<script type="text/javascript" src="${ctxPath}/assets/common/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js"></script>
<script>

    layui.use(['layer', 'form', 'ax','admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var $ax = layui.ax;
        var admin = layui.admin;

        var imgPath = $("#imgPath").val();
        $("#imgShow").attr("src",imgPath+"?tm="+ new Date().getTime());

        var jcrop_api;

        var width = $("#width").val();
        var height = $("#height").val();

        $('#imgShow').Jcrop({
            onChange:   showCoords,	//选框改变时的事件
            onSelect:   showCoords,	//选框选定时的事件
            aspectRatio:width/height			//比例 width/height
        },function(){
            jcrop_api = this;
        });

        function showCoords(c){
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);
        };

        //点击事件
        $('#btnSubmit').click(function () {
            if(x.value != "" && y.value != "" && w.value != "" && h.value != ""){
                var ajax = new $ax(Feng.ctxPath + "/upload/cutImage",function (data) {
                    if(data.result == "success"){
                        //关闭窗口
                        admin.closeThisDialog();
                    }else{
                        Feng.error("裁切失败");
                        return false;
                    }
                });
                ajax.set("x",$("#x").val());
                ajax.set("y",$("#y").val());
                ajax.set("w",$("#w").val());
                ajax.set("h",$("#h").val());
                ajax.set("imgPath",$("#imgPath").val());
                ajax.start();
            }else{
                //关闭窗口
                admin.closeThisDialog();
            }
        });

    });



</script>

</body>
</html>